<!-- 首页关注小页面内卡片 组件 -->
<template>
  <div id="homeFollowCardBox">
    <!-- 卡片总区域 -->
    <div class="card_box">
      <!-- 卡片用户栏区域 -->
      <div class="card_user_box" v-if="!isHaveFollow">
        <!-- 用户栏左边头像 -->
        <img src="../../../assets/user-sex-male.png" class="card_user_img">
        <!-- 用户栏中间区域 -->
        <div class="card_user_middle_box">
          <div class="card_user_middle_up_box">
            <!-- 用户姓名 -->
            <div class="card_user_name">{{ cardList.username }}</div>
            <!-- 用户签名 -->
            <div class="card_user_sign">，{{ cardList.sign }}</div>
          </div>
          <div class="card_user_middle_down_box">
            <!-- 回答关注数量 -->
            <div class="card_answerAndFollowNum">{{ cardList.answerNum }} 回答 · {{ cardList.followNum }} 关注</div>
          </div>
        </div>
        <!-- 用户栏右边关注按钮 -->
        <div class="btn_follow" @click="addFollow" v-if="!isHaveFollow" :style="cardList.isFollow?changeBtnFollowStyle:''">
          <span class="btn_follow_span" v-if="!cardList.isFollow" @click="changeIsHaveFollow">+ 关注他</span>
          <span class="btn_follow_span" v-if="cardList.isFollow">已关注</span>
        </div>
      </div>
      <div class="have_follow_user_box" v-if="isHaveFollow">{{ cardList.username }} 发布的问题 ·7天前</div>
      <!-- 卡片标题区域 -->
      <div class="card_title_box">
        <router-link :to="'/articlePage/'+cardList.id" class="card_title">{{ cardList.title }}</router-link>
      </div>
      <!-- 卡片中间内容区域 文章收缩的 -->
      <div class="card_body_box_close" v-if="!isOpen">
        <!-- 中间左边图片区域 -->
        <router-link :to="'/articlePage/'+cardList.id"><img class="card_body_left_img" v-if="cardList.isImage"></router-link>
        <!-- 中间右边文章内容部分显示区域 -->
        <div class="card_body_right_box" :style="!cardList.isImage ? changeCardRightBoxStyle:''">
          <p class="card_content_text" @click="isOpen=!isOpen">{{ cardList.content }}</p>
          <div class="btn_open" @click="isOpen=!isOpen">阅读全文 ↓</div>
        </div>
      </div>
      <!-- 卡片中间内容区域 文章全部显示的 -->
      <div class="card_body_box_open" v-if="isOpen">
        {{ cardList.content }}
      </div>
      <!-- 卡片下边用户操作区域 -->
      <div class="card_function_box">
        <!-- 关注问题按钮 -->
        <div class="question_btn_follow" @click="cardList.isFollowQuestion=!cardList.isFollowQuestion" :style="cardList.isFollowQuestion?changeBtnFollowQuestionStyle:''">
          <span class="btn_follow_span" v-if="!cardList.isFollowQuestion">关注问题</span>
          <span class="btn_follow_span" v-if="cardList.isFollowQuestion">取消关注</span>
        </div>
        <!-- 评论按钮 -->
        <div class="btn_comment">
          <div style="line-height: 37px;float: left;margin-right: 5px"><img src="../../../assets/comment_btn.png" class="btn_comment_img"></div>
          <span style="float: left">{{ cardList.commentNum }} 条评论</span>
        </div>
        <!-- 分享按钮 -->
        <div class="btn_analysis">
          <div style="line-height: 37px;float: left;margin-right: 5px"><img src="../../../assets/share_btn.png" class="btn_comment_img"></div>
          <span style="float: left">分享</span>
        </div>
        <!-- 收藏按钮 -->
        <div class="btn_collection">
          <div style="line-height: 37px;float: left;margin-right: 5px"><img src="../../../assets/collection_btn.png" class="btn_comment_img"></div>
          <span style="float: left">收藏</span>
        </div>
        <!-- 收缩文章按钮 -->
        <div class="btn_close" v-if="isOpen" @click="isOpen=!isOpen">收起 ↑</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homeFollowCardBox',
  components: {
  },
  data () {
    return {
      isOpen: false,
      changeCardRightBoxStyle: [{'width': '100%'}, {'padding': '0px'}],
      changeBtnFollowStyle: {'background-color': '#8590a6'},
      changeBtnFollowQuestionStyle: [{'background-color': '#8590a6'}, {'color': 'white'}, {'border': '1px solid #8590a6'}]
    }
  },
  props: ['cardList', 'isHaveFollow'],
  computed: {
  },
  methods: {
    addFollow () {
      if (this.cardList.isFollow) {
        this.cardList.followNum--
      } else {
        this.cardList.followNum++
      }
      this.cardList.isFollow = !this.cardList.isFollow
    },
    changeIsHaveFollow () {
      this.$emit('changeIsHaveFollow', true)
    }
  }
}
</script>

<style scoped>
  @import '../../../../../../static/css/home/HomeFollowCardBox.css';
</style>
